<template>
  <a-layout class="common-layout">
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      style="background: #fff"
    >
      <a-menu mode="inline" :default-selected-keys="[0]">
        <template v-for="(menu, i) in menus">
          <a-menu-item v-if="!menu.children" :key="i">
            <router-link :to="menu.route" class="aside-menu-link">
              <a-icon :type="menu.iconname" />
              <span>{{ menu.menulabel }}</span>
            </router-link>
          </a-menu-item>
          <sub-menu v-else :key="i" :menu-info="menu" />
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="handleCollapseChange"
        />
      </a-layout-header>
      <a-layout-content class="layout-content" ref="layoutContent">
        <!-- <div class="layout-util">
          <a-button type="link" @click="switchfullscreen">
            <a-icon :type="isFullscreen ? 'fullscreen' : 'fullscreen-exit'" />
          </a-button>
        </div> -->
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import menus from "../configs/menu.config.js";
import SubMenu from "./submenu.vue";
import bus from "@/utils/bus";
import { fullScreen } from "@/utils/index";
export default {
  components: {
    SubMenu
  },
  data() {
    return {
      menus,
      isFullscreen: false,
      collapsed: false
    };
  },
  methods: {
    handleCollapseChange() {
      this.collapsed = !this.collapsed;
      bus.$emit("sidebarChange");
    },
    switchfullscreen() {
      if (this.isFullscreen) {
        fullScreen.inactivate();
        this.isFullscreen = false;
        fullScreen.isFullscreen = false;
      } else {
        fullScreen.activate(this.$refs.layoutContent.$el);
        this.isFullscreen = true;
        fullScreen.isFullscreen = true;
      }
    }
  }
};
</script>

<style lang="less">
.common-layout {
  height: 100%;
}
.common-layout .trigger {
  margin-left: 20px;
}
.common-layout .ant-layout-sider {
  overflow: hidden;
  min-width: 260px !important;
  border-right: 1px solid #e8e8e8;
}
.common-layout .ant-layout-sider-collapsed {
  min-width: 79px !important;
}
.common-layout .ant-menu {
  border: none;
}
.layout-content {
  position: relative;
  margin: 24px 16px;
  padding: 20px;
  background: #fff;
  min-height: 280px;
  overflow: auto;
  .layout-util {
    position: absolute;
    right: 10px;
    top: 0;
  }
}
</style>
